<template>
    <div>
        <Shortcut></Shortcut>
        <div class="order-pay">
            <div class="header">
                <div class="title clearfix">
                    <div class="logo fl">
                        <Logo></Logo>
                    </div>
                    <div class="shop-name fl">极客商城</div>
                    <div class="name fl">支付页面</div>
                </div>
            </div>
            <div class="order-info">
                <div class="order-num">
                    订单提交成功， 请尽快支付! 订单号: {{}}
                    <span>{{ tradeNo }}</span>
                </div>
                <div class="pay-mode">
                    <div>
                        应付金额：
                        <span class="pay-count">￥{{ orderAmount }}</span
                        >元
                    </div>
                    <img src="@/assets/images/order/alipay.png" alt="" />
                    支付宝支付
                </div>
                <div class="pay-order">
                    <button class="pay-order-button" @click="toAlipay">
                        支付
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Shortcut from "@/components/common/Shortcut";
import Logo from "@/components/common/Logo";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { toAlipayPage } from "@/network/order";
const route = useRoute();
let tradeNo = ref();
let orderAmount = ref();
onMounted(() => {
    tradeNo.value = route.query.tradeNo;
    orderAmount.value = route.query.orderAmount;
})

const toAlipay = () => {
    let orderdata = ref({
        tradeNo: tradeNo.value,
        orderAmount: orderAmount.value
    })

    let pay_url = ref("");
    toAlipayPage(orderdata.value).then(res => {
        pay_url.value = res.alipay;
        console.log(pay_url.value)
        window.location.href = pay_url.value;
    })
}

</script>

<style lang="less" scoped>
.order-pay {
    width: var(--content-width);
    margin: 0 auto;
    border-bottom: 3px solid #c0a6ff;
    .header {
        height: 130px;
        line-height: 120px;
    }
    .title {
        height: 80px;
        line-height: 80px;
        .logo {
            height: 40px;
        }
        .shop-name {
            font-size: 30px;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: 30px;
            font-weight: 700;
            color: #c0a6ff;
        }
        .name {
            font-size: 20px;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: 30px;
        }
    }
    .order-info {
        background: linear-gradient(to right, #eee6f6, #fce6f3);
        line-height: 42px;
        height: 42px;
        font-size: 16px;
        padding-left: 20px;
        margin-top: 20px;
        .order-num {
            font-size: 20px;
        }
        .pay-mode {
            background: linear-gradient(
                to right,
                #f4d590,
                #bcfefe,
                #baf4b3,
                #f28583
            );
            font-size: 16px;
            margin-top: 20px;
            padding: 20px;
            .pay-count {
                color: red;
            }
        }
        .pay-order {
            text-align: right;
            margin-top: 20px;
            .pay-order-button {
                margin-right: 100px;
                width: 135px;
                height: 35px;
                line-height: 35px;
                font-size: 16px;
                font-weight: 700;
                background-color: #dbffba;
                border-radius: 5px;
            }
        }
    }
}
</style>